<template>
  <el-form inline>
    <div class="flex flex-center">
      <label class="mr-15">作业员</label>
      <el-input class="mr-15 flex1" ref="empInput" v-model="data.emp" @keyup.enter.native="checkEmp"
        :disabled="!canInputEmp" @blur="blurHandle">
      </el-input>
      <el-input class="mr-15 flex1" v-model="data.empName" disabled></el-input>
      <el-button type="info" round @click="clearEmp">变更</el-button>
    </div>
  </el-form>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: '',
    },
    focus: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {}
  },
  computed: {
    canInputEmp: function () {
      return !this.data.empName
    },
  },
  mounted() {
    if (this.focus) {
      this.$refs.empInput.focus()
    }
  },
  watch: {
    focus(nv) {
      if (!!nv) {
        this.$refs.empInput.focus()
      }
    },
  },
  methods: {
    blurHandle() {
      this.$emit('update:focus', false)
    },
    checkEmp() {
      if (!this.data.emp) {
        return
      } else {
        this.$request(this.$api.ppmatch + 'checkemp', { emp: this.data.emp }, 'get', true)
          .then((r) => {
            this.$set(this.data, 'empName', r.username)
            this.$emit('onChange', true)
          })
          .catch((e) => {
            this.$emit('onChange', false)
            setTimeout(() => {
              this.$refs.empInput.select()
            }, 200)
            return
          })
      }
    },
    clearEmp() {
      this.$set(this.data, 'emp', '')
      this.$set(this.data, 'empName', '')
      this.$emit('onClear', true)
      setTimeout(() => {
        this.$refs.empInput.focus()
      }, 500)
    },
  },
}
</script>